<template>
  <avue-crud ref="userRef" :table-loading="tableLoading" :option="option" @refresh-change="getList" :data="data"
    :page="page" @size-change="sizeChange" @current-change="currentChange" @search-change="searchChange"
    @search-reset="searchReset">
    <template #menu="{ row, index, size }">
      <el-button type="primary" text @click="userDetail(row)">详情</el-button>

      <el-button :type="row.status ? 'info' : 'danger'" text @click="mark(row.userId, row.status)">{{ row.status ?
        "取消标记" : "标记用户" }}</el-button>


    </template>
  </avue-crud>

  <DetailDialog :visible="detailVisible" v-model="detailVisible" :detailData="detail_data"
    @update:visible="detailVisible = $event" />

</template>

<script setup>
import { onMounted, ref, reactive } from "vue";
import user from "@/options/userGameList";
import DetailDialog from '@/components/DetailDialog.vue';
import { ElMessageBox, ElMessage } from "element-plus";
import {
  getUserList,
  markUser,
  addUserGold,
  getUserInfo,
  getUserFlow,
} from "@/apis/admin";
import { useRouter } from "vue-router";

// const cellStyle = ({ row, column, rowIndex, columnIndex }) => {
//   if (columnIndex == 4) {
//     if (row.status == 0) {
//       return {
//         color: "green",
//         fontWeight: "bold",
//         fontSize: "20",
//       };
//     } else {
//       return {
//         color: "red",
//         fontWeight: "bold",
//         fontSize: "20",
//       };
//     }
//   }
// };





const flowUserId = ref("");

const detailVisible = ref(false);


onMounted(() => {
  getList();
});
const searchChange = (form, done) => {
  page.searchInfo = form;
  page.currentPage = 1;
  getList();
  done();
};
const searchReset = () => {
  page.searchInfo = {};
  page.currentPage = 1;
  getList();
};

const detail_data = ref({});

const userDetail = (data) => {
  console.log('userDetail---')
  getUserInfo.post("", {
    userId: data.userId
  }).then((res) => {
    detail_data.value = res.data;
    detailVisible.value = true;
  })
  flowUserId.value = data.userId;
};

const mark = (id, type) => {
  let msg = "";
  if (type == "1") {
    msg = "此操作将取消标记该用户, 是否继续?";
  } else {
    msg = "此操作将标记该用户, 是否继续?";
  }
  ElMessageBox.confirm(msg, "提示", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  }).then(() => {
    markUser.post("", { userId: id, status: type == "1" ? 0 : 1 }).then((res) => {
      if (res.code == 200) {
        ElMessage.success("修改成功!");
        getList();
      }
    });
  });
};
const option = user;
const page = reactive({
  total: 0,
  searchInfo: {},
  currentPage: 1,
  pageSize: 10,
});
const sizeChange = (val) => {
  page.pageSize = val;
  getList();
};
const currentChange = (val) => {
  page.currentPage = val;
  getList();
};
const data = ref([]);
const tableLoading = ref(false);
const getList = async () => {
  tableLoading.value = true;
  const res = await getUserFlow.post("", {
    userId: 0,
    page: page.currentPage,
    pageSize: page.pageSize,
    searchInfo: page.searchInfo,
  });
  tableLoading.value = false;
  if (res.code == 200) {
    page.total = res.data.total;
    data.value = res.data.list || [];
  }
};

const formatDate = (date, cut) => {
  var date = new Date(date);
  var YY = date.getFullYear() + cut;
  var MM =
    (date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1) + cut;
  var DD = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
  var hh = (date.getHours() < 10 ? "0" + date.getHours() : date.getHours()) + ":";
  var mm = (date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes()) + ":";
  var ss = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
  return YY + MM + DD + " " + hh + mm + ss;
};
</script>
<style lang="scss" scoped>
.subtitle {
  width: 100%;
  border-radius: 4px;
  background: #f5f5f5;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  font-size: 15px;
  font-weight: 600;
  box-sizing: border-box;
  padding: 8px 10px;
  margin: 10px 0;
}

.label {
  color: #666;
  font-size: 12px;
  padding-right: 8px;
}

.value {
  color: #333;
  font-size: 13px;
}

.fullscreen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: white;
  z-index: 9999;
  overflow: auto;
}
</style>
